<script setup lang="ts">
import { useRoute } from 'vue-router';

import { ElCard, ElImage, ElSkeleton, ElTag } from 'element-plus';
import ByDescription from '@/components/common/ByDescription.vue';
import ByDescriptionItem from '@/components/common/ByDescriptionItem.vue';

import useEnum from '@/hooks/useEnum';
import useRequest from '@/hooks/useRequest';
import ApiCoupon from '@/api/coupon';

import { TCoupon } from '@/global';

const { get: getCoupontype } = useEnum("EnumCouponType");
const { get: getCouponCategory } = useEnum("EnumCouponCategory");
const { get: getCouponStatus } = useEnum("EnumCouponStatus");

const { params } = useRoute();
const { isFetching, data } = useRequest<{ detail: TCoupon; }>(ApiCoupon?.detail, { defaultParams: { id: Number(params.id) } })

</script>

<template>
    <ElCard header="票券信息">
        <ElSkeleton v-if="isFetching" :rows="7" />

        <ByDescription v-else :column="1" label-suffix=":" label-width="5em">
            <ByDescriptionItem label="票券码">{{ data?.detail.coupon_code }}</ByDescriptionItem>
            <ByDescriptionItem label="票券图标">
                <ElImage :src="data?.detail.coupon_img" class="w-100px h-100px" fit="contain" />
            </ByDescriptionItem>
            <ByDescriptionItem label="票券名称">{{ data?.detail.coupon_name }}</ByDescriptionItem>
            <ByDescriptionItem label="启用状态">
                <ElTag :type="getCouponStatus(data?.detail.status, 'color')">
                    {{ getCouponStatus(data?.detail.status, 'label') }}
                </ElTag>
            </ByDescriptionItem>
            <ByDescriptionItem label="票券标签">
                {{ getCoupontype(data?.detail.coupon_type, 'label') }}
            </ByDescriptionItem>

            <ByDescriptionItem label="票券类别">
                {{ getCouponCategory(data?.detail.coupon_type, 'label') }}
            </ByDescriptionItem>

            <ByDescriptionItem label="优惠面值">
                {{ data?.detail.coupon_num }}
                {{ getCouponCategory(data?.detail.coupon_category, "unit") }}
            </ByDescriptionItem>

            <ByDescriptionItem label="票券描述">
                <div class="max-h-100px p-2 bg-black/5 rounded-md overflow-auto whitespace-pre">
                    {{ data?.detail.coupon_desc }}</div>
            </ByDescriptionItem>

            <ByDescriptionItem label="备注">
                <div class="max-h-100px p-2 bg-black/5 rounded-md overflow-auto whitespace-pre">
                    {{ data?.detail.remark || '无' }}</div>
            </ByDescriptionItem>
        </ByDescription>
    </ElCard>
</template>